@import "../../../../shared/color";

.legend {
	& > button {
		& > span {
			color: #a3a3a3 !important;
		}
	}
}

.ld2-info-page-box {
	
	padding-right: 0px;
	
	section {
		display: flex;
		width: 100%;
		justify-content: center;
	}
	
	.ld2-info-view {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 20px;
		background-color: #ffffff;
		margin-right: 10px;
		//border: 1px solid #e4e4e4;
		width: 40%;
		border-radius: 3px;
		max-width: 410px;
	}
	
	.info-properties {
		flex-grow: 1;
		font-size: 14px;
		padding: 24px 40px 0 50px;
		background-color: #ffffff;
		//border: 1px solid #e4e4e4;
		border-radius: 3px;
		max-width: 640px;
		
		//标题
		& > h1, & > div {
			padding-left: 4px;
			//color: #F44336;
			color: #000000;
			color: @primary-color;
		}
		
		//描述
		& > div {
			padding-bottom: 20px;
			color: #9a9a9a;
		}
		
		h1 {
			max-width: 600px;
			font-size: 24px;
			
			span {
				color: @icon-color;
			}
		}
		
		td {
			padding: 10px 0;
			color: #9a9a9a;
			
			&.files-td {
				
				.ant-empty {
					width: 200px;
				}
			}
			
			&.buttons-td > div {
				display: flex;
				padding-top: 25px;
				padding-bottom: 20px;
				
				button {
					margin-right: 10px;
				}
				
				.total-fee {
					color: #FF5722;
				}
			}
			
			& > label {
				font-weight: bold;
				color: #000000;
				padding: 4px;
				min-width: 100px;
				
				&.file-item-title {
					color: rgb(0, 0, 0);
					
					& > span {
						color: #9a9a9a;
						display: inline-block;
						margin-left: 8px;
						font-size: 14px;
						font-weight: normal;
					}
				}
			}
		}
	}
	
	.video-container{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.zr-three-stage-container {
		padding: 10px 20px;
		height: 100%;
		background-color: rgba(250, 250, 250, 0);
	}
	
	
	.info-image {
		padding: 10px 20px;
		//border-right: 2px dotted rgba(218, 218, 218, 0.4);
		//height: 100%;
		
		.info-image-border {
			padding: 0 10px 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			//background-color: #6a6a6a;
			margin: 4px;
			cursor: pointer;
			
			img {
				max-width: 410px;
				//border: 14px solid #f9f9f9;
				//border-radius: 4px;
			}
			
			&.no-image {
				height: 460px;
				
				& > img {
					width: 200px;
				}
			}
		}
		
		.image-navigator {
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: flex-start;
			min-height: 90px;
			
			.image-navigator-left,
			.image-navigator-right {
				display: flex;
				justify-content: center;
				align-items: stretch;
				font-size: 38px;
				height: 100%;
				flex-grow: 1;
				font-weight: bold;
				
				&.disable {
					color: #ececec;
				}
			}
			
			.info-image-navigation-carousel {
				width: 310px;
				height: 80px;
				
				.navigator-image-border {
					padding: 2px;
					margin: 0 4px;
					
					img {
						width: 50px;
						border: 2px solid rgba(255, 255, 255, 0);
						cursor: pointer;
					}
					
					&.border-selected {
						img {
							border: 2px solid #ff0003;
						}
					}
				}
			}
		}
	}
	
	.size-table-container {
		width: 100%;
		margin-top: 50px;
		padding: 20px 20px 30px;
		background-color: #ffffff;
		border-top: 1px solid #e4e4e4;
		margin-top: 10px;
		//max-width: 1060px;
		
		.ant-table-bordered.ant-table-empty .ant-table-placeholder {
			border: none;
		}
		
		h1 {
			text-align: left;
			padding-top: 0px;
			color: #000000;
		}
		
		& > div {
			font-size: 14px;
			text-align: left;
			color: @text-color;
			padding: 0 0 10px;
		}
	}
}


@media screen and (max-width: 1449px) {
	.ld2-info-page-box {
		.info-properties {
			td {
				padding: 6px 0;
			}
		}
	}
	
	.info-image {
		.info-image-border {
			img {
				max-width: 320px !important;
			}
		}
	}
}




